<template>
  <div>
    <h1>
      全选: <input type="checkbox" v-model="isAll" />
      <button>反选</button>
      <ul>
        <li v-for="item in list" :key="item.name">
          <input type="checkbox" v-model="item.checked" /> {{ item.name }}
        </li>
      </ul>
    </h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { checked: true, name: "八戒" },
        { checked: false, name: "悟空" },
        { checked: false, name: "师父" },
        { checked: true, name: "沙师弟" },
      ],
    };
  },

  computed: {
    // 简写： 只能读取，不能赋值修改
    // isAll() {
    //   const res = this.list.every((item) => {
    //     return item.checked === true;
    //   });
    //   return res;
    // },

    // 完整写法： 可以读取， 可以修改
    isAll: {
      // 计算的逻辑
      get() {
        const res = this.list.every((item) => {
          return item.checked === true;
        });
        return res;
      },

      // 赋值修改的逻辑
      set(val) {
        this.list.forEach((item) => {
          item.checked = val;
        });
      },
    },
  },
};
</script>

<style></style>
